<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'nomore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import {apiGetClassList,apiGetHistoryList} from '@/api/apis.js'
import {gotoHome} from '@/utils/common.js'

const classList=ref([])
const queryParams={
	pageNum:1,
	pageSize:12
}
let pageName
const noData=ref(false)

/* 页面挂载的回调：因为onLoad钩子的执行顺序在setup语法糖之后，所以拿到请求参数之后才能发送请求，所以发送网络请求语句写在onLoad函数中 */
onLoad((e)=>{
	//从对象e中解构赋值得到id、name、type
	let {id=null,name=null,type=null} = e
	//如果id不存在，直接返回
	// if(!id) gotoHome()
	//如果有id或type，把它们追加到请求参数对象（queryParams）中
	if(id) queryParams.classid=id
	if(type) queryParams.type=type
	//把接收到的name赋值给pageName
	pageName=name
	//用接收到的name修改导航栏标题 
	uni.setNavigationBarTitle({
		title:name
	})
	//发送请求获取分类列表数据（这行代码必须写在onLoad函数内部）
	getClassList()
})
/* 触底的钩子：如果没有数据直接返回，页码加1并发送请求获取分类列表数据 */
onReachBottom(()=>{
	//如果noData为true，直接返回
	if(noData.value) return
	//请求参数中的页码+1
	queryParams.pageNum++
	//发送请求获取分类列表数据
	getClassList()
})
//发送网络请求的函数
const getClassList=async ()=>{
	//发送网络请求获取分类列表数据
	let res
    if(queryParams.classid) res=await apiGetClassList(queryParams)
    if(queryParams.type) res=await apiGetHistoryList(queryParams)
	//把新拿到的数据和原来的数据进行合并
	classList.value=[...classList.value,...res.data]
	//如果接口没有数据了，noData赋值为true
	if(queryParams.pageSize>res.data.length) noData.value=true
	//把拿到的数据放到本地存储中去
	uni.setStorageSync('storageClassList',classList.value)
}
//分享给好友
onShareAppMessage((e)=>{
	return{
		title:"蝴蝶虾壁纸-"+pageName,
		path:"/pages/classlist/classlist?id="+queryParams.classid+"&name="+pageName
	}
})
//分享到朋友圈
onShareTimeline(()=>{
	return{
		title:"蝴蝶虾壁纸-"+pageName,
		query:{
			id:queryParams.classid,
			name:pageName
		}
	}
})
//页面卸载的回调：清除缓存（分类列表）
onUnload(()=>{
	uni.removeStorageSync('storageClassList')
})
</script>

<style lang="scss" scoped>
.classlist{
	.content{
		//网格布局
		display: grid;
		gap: 5rpx;
		grid-template-columns: repeat(3,1fr);
		//盒子模型
		padding: 5rpx;//不让cotent内容和父级盒子贴边
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				//转换块元素
				display: block;//行内块元素本身就有空隙，和网格布局的gap效果重合，不美观，转换成块元素
			}
		}
	}
}	       
</style>
